<template>
	<el-card>
		<el-button
			type="primary"
			:icon="Plus"
			:disabled="!categoryStore.category3Id"
			@click="toShowSpuForm"
			>添加SPU</el-button
		>
		<el-table border :data="spuList" v-loading="loading" style="margin: 10px 0">
			<el-table-column
				label="序号"
				type="index"
				align="center"
				width="80"
			></el-table-column>
			<el-table-column label="SPU名称" prop="spuName"></el-table-column>
			<el-table-column label="SPU描述" prop="description"></el-table-column>
			<el-table-column label="SPU操作">
				<template v-slot="{ row, $index }">
					<el-tooltip
						class="box-item"
						effect="dark"
						content="添加SKU"
						placement="top"
					>
						<el-button
							type="primary"
							size="small"
							:icon="Plus"
							@click="toAddSkuInfo(row)"
					/></el-tooltip>
					<el-tooltip
						class="box-item"
						effect="dark"
						content="编辑SPU"
						placement="top"
					>
						<el-button
							type="primary"
							size="small"
							:icon="Edit"
							@click="toEditSpuInfo(row)"
					/></el-tooltip>
					<el-tooltip
						class="box-item"
						effect="dark"
						content="查看SKU"
						placement="top"
					>
						<el-button
							type="info"
							size="small"
							:icon="InfoFilled"
							@click="toCheckSkuList(row)"
					/></el-tooltip>
					<el-popconfirm
						confirm-button-text="是"
						cancel-button-text="取消"
						:icon="InfoFilled"
						icon-color="#626AEF"
						title="确定要删除吗？"
						@confirm="toDeleteSpuInfo(row, $index)"
						><template #reference>
							<el-button type="danger" size="small" :icon="Delete" /></template
					></el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:page-sizes="[3, 6, 9, 12]"
			:small="small"
			:disabled="disabled"
			:background="background"
			layout=" prev, pager, next, jumper, ->,sizes,total"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
		<!-- 查看列表的对话框 -->
		<el-dialog v-model="skuListTableVisible" title="SKU列表">
			<el-table :data="skuList">
				<el-table-column property="skuName" label="名称" width="150" />
				<el-table-column property="price" label="价格(元)" width="200" />
				<el-table-column property="weight" label="重量(KG)" />
				<el-table-column label="默认图片">
					<template v-slot="{ row }">
						<el-image :src="row.skuDefaultImg" style="width: 100px"></el-image>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</el-card>
</template>

<script lang="ts">
export default {
	name: 'SPUList',
}
</script>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useCategoryListStore } from '@/stores/categoryList'
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue'
import { reqDeleteSpuInfo, reqGetSpuListData } from '@/api/product/spu'
import { reqDeleteAttrInfo } from '@/api/product/attr'
import { reqCheckSkuListData } from '@/api/product/sku'
import { ShowStatus } from '../types'
import { ElMessage } from 'element-plus'

const categoryStore = useCategoryListStore()
const spuList = ref([])
const skuList = ref([])
const currentPage = ref(1)
const skuListTableVisible = ref(false)

const pageSize = ref(3)
const total = ref(0)
const small = ref(false)
const loading = ref(false)
const background = ref(false)
const disabled = ref(false)

const emits = defineEmits(['setShowStatus', 'getSpuInfo'])

// 获取spuList
const getSpuListData = async () => {
	loading.value = true
	const result = await reqGetSpuListData(
		currentPage.value,
		pageSize.value,
		categoryStore.category3Id
	)
	loading.value = false
	spuList.value = result.records
	total.value = result.total
}

watch(
	() => categoryStore.category3Id,
	(category3Id) => {
		if (!category3Id) return (spuList.value = [])
		getSpuListData()
	},
	{ immediate: true }
)
// 实现分页效果
const handleCurrentChange = (val: number) => {
	currentPage.value = val
	getSpuListData()
}
// 修改每页显示数量
const handleSizeChange = (val: number) => {
	pageSize.value = val
	currentPage.value = 1
	getSpuListData()
}
// 跳转到spuForm页面
const toShowSpuForm = () => {
	emits('getSpuInfo', {})
	emits('setShowStatus', ShowStatus.SPU_FORM)
}
// 删除spuInfo数据
const toDeleteSpuInfo = async (row, index) => {
	await reqDeleteSpuInfo(row.id)
	ElMessage.success('spu对象删除成功')
	spuList.value.splice(index, 1)
}
// 编辑spuInfo数据回显
const toEditSpuInfo = (row) => {
	emits('getSpuInfo', row)
	emits('setShowStatus', ShowStatus.SPU_FORM)
}
// 添加skuInfo数据 传递当前spuInfo对象
const toAddSkuInfo = (row) => {
	emits('getSpuInfo', row)
	emits('setShowStatus', ShowStatus.SKU_FORM)
}
// 查看skuList列表
const toCheckSkuList = async (row) => {
	const result = await reqCheckSkuListData(row.id)
	skuListTableVisible.value = true
	skuList.value = result
}
</script>

<style scoped></style>
